<template>
	<view class="other-set-div">
		<text class="font-set">其他功能</text>
		<view class="other-set-content">
			<view v-for="(i,x) in tools" :key="x" class="item">
        <view>
          <image class="item-icon" :src="i.icon"/>
        </view>
        <view style="width: 112rpx">
          <text class="item-text">{{ i.label }}</text>
        </view>
      </view>
	  </view>
  </view>
</template>

<script lang="ts" setup>
 import {useTool} from "@/pages/my/component/setting";
 const tools = useTool()
 
</script>

<style lang="scss" scoped>
	.other-set-div{
		width: 720rpx;
		min-height: 432rpx;
		margin: 0 auto;
		padding: 34rpx 28rpx;
		background: #FFFFFF;
		box-shadow: 0 0 2rpx 0 rgba(0,0,0,0.04), 0 4rpx 12rpx 0 rgba(0,0,0,0.04), 0 20rpx 40rpx 0 rgba(0,0,0,0.04);
		border-radius: 24rpx;
		.font-set{
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 32rpx;
			color: #1C1C1C;
		}
	}
	.other-set-content{
    padding-top: 40rpx;
    //栅格布局，一行显示4个元素
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20rpx;
    .item {
      padding: 20rpx;
      text-align: center;
      font-size: 28rpx;
      color: #1C1C1C;
    }
    .item-icon{
      width: 44rpx;
      height: 44rpx;
    }
    .item-text{
      font-weight: 400;
      font-size: 28rpx;
      color: #5A5A5A;
    }
	}
</style>